<x-admin-layout>
    <div class="p-6">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between mb-6">
                <h1 class="text-2xl font-bold">角色管理</h1>
                <div>
                    <button class="layui-btn layui-btn-normal" id="addRole">
                        <i class="layui-icon layui-icon-add-1"></i> 添加角色
                    </button>
                </div>
            </div>

            <!-- 搜索表单 -->
            <form class="layui-form mb-6" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="searchForm">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

            <!-- 数据表格 -->
            <table id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
                <i class="layui-icon layui-icon-edit"></i> 编辑
            </button>
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
        </div>
    </script>

    <!-- 状态列模板 -->
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="@{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusSwitch" @{{ d.status == 1 ? 'checked' : '' }}>
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            
            // 初始化表格
            var roleTable = table.render({
                elem: '#roleTable',
                url: '{{ route('admin.auth.roles.list') }}',
                page: true,
                limit: 10,
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'name', title: '角色名称', width: 150},
                    {field: 'description', title: '描述'},
                    {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                    {field: 'created_at', title: '创建时间', width: 180, sort: true},
                    {title: '操作', width: 150, toolbar: '#tableToolbar', fixed: 'right'}
                ]],
                parseData: function(res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });
            
            // 搜索表单提交
            form.on('submit(searchForm)', function(data) {
                roleTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });
            
            // 状态切换
            form.on('switch(statusSwitch)', function(obj) {
                var id = this.value;
                var status = obj.elem.checked ? 1 : 0;
                
                $.ajax({
                    url: '{{ route('admin.auth.roles.index') }}/' + id + '/status',
                    type: 'PUT',
                    data: {
                        _token: '{{ csrf_token() }}',
                        status: status
                    },
                    success: function(res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 2});
                            // 恢复原状态
                            obj.elem.checked = !obj.elem.checked;
                            form.render('checkbox');
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误，请稍后重试', {icon: 2});
                        // 恢复原状态
                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');
                    }
                });
            });
            
            // 表格工具条事件
            table.on('tool(roleTable)', function(obj) {
                var data = obj.data;
                var event = obj.event;
                
                if (event === 'edit') {
                    // 编辑角色
                    layer.open({
                        type: 2,
                        title: '编辑角色',
                        content: '{{ route('admin.auth.roles.index') }}/' + data.id + '/edit',
                        area: ['700px', '600px'],
                        end: function() {
                            roleTable.reload();
                        }
                    });
                } else if (event === 'del') {
                    // 删除角色
                    layer.confirm('确定要删除该角色吗？', function(index) {
                        layer.close(index);
                        
                        // 发送删除请求
                        $.ajax({
                            url: '{{ route('admin.auth.roles.index') }}/' + data.id,
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, {icon: 1});
                                    roleTable.reload();
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        });
                    });
                }
            });
            
            // 添加角色按钮点击事件
            $('#addRole').click(function() {
                layer.open({
                    type: 2,
                    title: '添加角色',
                    content: '{{ route('admin.auth.roles.create') }}',
                    area: ['700px', '600px'],
                    end: function() {
                        roleTable.reload();
                    }
                });
            });
        });
    </script>
</x-admin-layout> 